import { ExtractPropTypes, PropType } from "vue"
import { TuniaoType, TuniaoSize, ImageMode, TuniaoSizes } from '../../types/tuniao-ui'
import { AvatarShape, AvatarShapes, AvatarBadgeConfig } from './avatar'
import { validatorSizeValue } from '../../utils'

export type AvatarGroupList = {
  /** 图标名称或者图片地址 */
  icon?: string,
  /** 头像文字内容 */
  text?: string,
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor?: string,
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color?: string,
  /** 图标颜色类型，如果自定义了颜色则使用颜色的值 */
  type?: TuniaoType,
  /** 字体大小, 在显示文字和图标模式下有效, 默认单位为rpx */
  fontSize?: string | number,
  /** 加粗字体, 在显示文字模式下有效 */
  fontBold?: boolean,
  /** 显示边框 */
  border?: boolean,
  /** 加粗边框, 当border为true时才生效 */
  borderBold?: boolean,
  /** border边框颜色, 当border为true时才生效 */
  borderColor?: string,
  /** 设置阴影 */
  shadow?: boolean,
  /** 阴影颜色 */
  shadowColor?: string,
  /** 显示角标 */
  badge?: boolean,
  /** 角标配置信息 */
  badgeConfig?: AvatarBadgeConfig & {
    /** 图标 */
    icon?: String,
    /** 文本 */
    text?: String
  },
  /** 自定义样式 */
  customStyle?: object,
  /** 图片模式mode，当图片为图片时生效 */
  imgMode?: ImageMode,
  /** 点击按钮时传递的标志符 */
  index?: string | number
}

/**
 * props参数
 */
export const avatarGroupProps = {
  /** 头像列表数据 */
  data: Array as PropType<Array<AvatarGroupList>>,
  default: (): AvatarGroupList[] => {
    return []
  },
  /** 尺寸大小，同时设置宽高的值(内置sm、lg、xl), 默认单位为rpx */
  size: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value) || TuniaoSizes.includes(value as TuniaoSize)
    }
  },
  /** 按钮形状 square 圆角正方形 */
  shape: {
    type: String,
    default: '',
    validator: (value: AvatarShape | '') => {
      return value === '' || AvatarShapes.includes(value)
    }
  },
  /** 头像之间的遮挡比例[0-1] */
  gap: {
    type: Number,
    default: 0.4
  }
}
export type AvatarGroupProps = ExtractPropTypes<typeof avatarGroupProps>
export const avatarGroupEmits = {
  /** 点击事件 */
  click: (index: string | number) => typeof index === 'string' || typeof index === 'number'
}
export type AvatarGroupEmits = typeof avatarGroupEmits
